<!DOCTYPE html>
<html class="x-admin-sm" >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>用户列表</title>
  <link rel="stylesheet" href="/static/css/font.css">
  <link rel="stylesheet" href="/static/css/index.css">
  <script src="/static/lib/layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript" src="/static/js/index.js"></script>
</head>
<body>
<div class="x-nav">
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
    <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-body ">
          <form class="layui-form layui-col-space5" method="post" action="findUsersByName">
            <div class="layui-inline layui-show-xs-block">
              <input type="text" name="name"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-inline layui-show-xs-block">
              <button class="layui-btn"  lay-submit="" lay-filter="sreach" type="submit"><i class="layui-icon">&#xe615;</i></button>
            </div>
          </form>

        </div>
        <!--
        <div class="layui-card-header">
          <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
          <button class="layui-btn" onclick="xadmin.open('添加用户','./member-add.html',600,400)"><i class="layui-icon"></i>添加</button>
        </div>-->
        <div class="layui-card-body layui-table-body layui-table-main">
          <table class="layui-table layui-form" align="center">
            <thead >
            <tr>
              <!--<th>
                <input type="checkbox" lay-filter="checkall" name="" lay-skin="primary">
              </th>-->
              <th>ID</th>
              <th>用户名</th>
              <th>性别</th>
              <th>手机</th>
              <th>邮箱</th>
<!--              <th>地址</th>-->
              <th>注册时间</th>
              <th>账号状态</th>
              <th>操作</th></tr>
            </thead>
            <tbody >
            <tr  th:each="user,userStat:${users}">
              <!--<td>
                <input type="checkbox" name="id" value="1"   lay-skin="primary">
              </td>-->
              <td th:text="${userStat.index+1}"></td>
              <td th:text="${user.userName}"></td>
              <td th:text="${user.userSex} == 1 ? 男 : 女"></td>
              <td th:text="${user.userPhone}"></td>
              <td th:text="${user.userMail}"></td>
              <td th:text="${user.registrationTime}"></td>
              <td class="td-status">
                <span class="layui-btn layui-btn-normal layui-btn-mini"  th:if="${user.userStatus} == 0">已启用</span>
                <span class="layui-btn layui-btn-danger layui-btn-mini"  th:if="${user.userStatus} == 1">已停用</span></td>
              <td class="td-manage">
                <a  th:if="${user.userStatus} == 0" th:onclick="member_stop(this,[[${user.userId}]])" href="javascript:;"  title="禁用">
                  <i class="layui-icon">&#xe601;</i>
                </a>
                <a  th:if="${user.userStatus} == 1" th:onclick="member_stop(this,[[${user.userId}]])" href="javascript:;"  title="启用">
                  <i class="layui-icon">&#xe62f;</i>
                </a>
              </td>
            </tr>

            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script  th:inline="javascript">
  layui.use(['laydate','form'], function(){
    var laydate = layui.laydate;
    var  form = layui.form;


    // 监听全选
    form.on('checkbox(checkall)', function(data){

      if(data.elem.checked){
        $('tbody input').prop('checked',true);
      }else{
        $('tbody input').prop('checked',false);
      }
      form.render('checkbox');
    });

    //执行一个laydate实例
    laydate.render({
      elem: '#start' //指定元素
    });

    //执行一个laydate实例
    laydate.render({
      elem: '#end' //指定元素
    });


  });

  /*用户-停用*/
  function member_stop(obj,id){
    var res;
    layer.confirm('确认修改用户状态吗？',function(index){

      if($(obj).attr('title')=='启用'){

        //发异步把用户状态进行更改
        $(obj).attr('title','停用')
        $.ajax({
          url:'updateUserStatus',
          method:'post',
          async:false,
          data:{'userId':id,'userStatus':0},
          success:function (data) {
            res=data;
          }
        });
        if (res=="1"){
          location.reload();
          layer.msg('已停用!',{icon: 5,time:1000});
        }else {
          window.location.href="toErrorPage"
        }


      }else{
        $(obj).attr('title','启用')
        $.ajax({
          url:'updateUserStatus',
          method:'post',
          async:false,
          data:{'userId':id,'userStatus':1},
          success:function (data) {
            res=data;
          }
        });
        if (res=="1"){
          location.reload();
          layer.msg('已停用!',{icon: 5,time:1000});
        }else {
          window.location.href="toErrorPage"
        }
      }

    });
  }

</script>
</html>